import React from 'react';
import './App.css';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import Button, { ButtonType, ButtonSize } from './components/Button/button.tsx';
import Menu from './components/Menu/menu.tsx';
import MenuItem from './components/Menu/menuItem.tsx';
import SubMenu from './components/Menu/subMenu.tsx';
import Icon from './components/Icon/icon.tsx';

library.add(fas);


const App = () => {

  return (
    <div className="App">

      <h1>Icon Component</h1>
      {/* ICON */}
      <Icon icon="coffee" theme="primary" size={"lg"} />

      <h1>Button Component</h1>
      {/* BUTTON */}
      <Button btnType={ButtonType.Primary} disabled>Normal</Button>
      <Button btnType={ButtonType.Danger} size={ButtonSize.Large}>Primary</Button>
      <Button btnType={ButtonType.Link} size={ButtonSize.Large} >Large,Link</Button>
      <Button btnType={ButtonType.Danger} size={ButtonSize.Small}>Small,Danger</Button>
      <Button disabled btnType={ButtonType.Default} size={ButtonSize.Large}>Default</Button>

      <h1>Menu Component</h1>
      {/* MENU */}
      <Menu defaultIndex={0} onSelect={(index) => { console.log(index) }} mode="vertical" defaultOpenSubMenus={['0']}>
        <MenuItem >首页</MenuItem>
        <MenuItem >DIZ</MenuItem>
        <MenuItem disabled>组件库</MenuItem>
        <SubMenu title="菜单">
          <MenuItem >黄焖鸡米饭</MenuItem>
          <MenuItem >螺蛳粉</MenuItem>
          <MenuItem >牛肉汉堡</MenuItem>
        </SubMenu>
        <MenuItem >登录</MenuItem>
      </Menu>
    </div >
  );
};

export default App;